<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-10-18 09:34:22
 * @LastEditTime: 2023-11-10 15:02:27
-->
<template>
    <div class="receive1">
        <div class="receive2">
            <div>
                <span style="font-weight: 700;">{{ $t('text.Contract.l129') }}</span>
                <span class="tag1" v-if="status == 0">{{ $t('text.Contract.l14') }}</span>
                <span class="tag2" v-if="status == 1">{{ $t('text.Contract.l20') }}</span>
                <span class="tag3" v-if="status == 2">{{ $t('text.Contract.l21') }}</span>
            </div>
            <DialogLayout51 @returnData="refresh">
                <el-button round style="height: 28px;color: #6698ff;border: 1px solid #6698ff;">{{ $t('text.Contract.l158')
                }}</el-button>
            </DialogLayout51>
        </div>

        <div class="ov">
            <table class="receive3" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
                <tr class="receive4">
                    <td class="receive5">{{ $t('text.Contract.l159') }}</td>
                    <td class="receive5">{{ $t('text.Contract.l160') }}</td>
                    <td class="receive5">{{ $t('text.Contract.l161') }}</td>
                    <td class="receive5">{{ $t('text.Contract.l162') }}</td>
                    <td class="receive5">{{ $t('text.Contract.l163') }}</td>
                    <td class="receive5">{{ $t('text.Contract.l164') }}</td>
                    <td class="receive5">{{ $t('text.Contract.l165') }}</td>
                    <td class="receive5">{{ $t('text.Contract.l166') }}</td>
                    <td class="receive5">{{ $t('text.Contract.l167') }}</td>
                </tr>
                <tr v-for="(item, index) in dataList" :key="item">
                    <td class="receive6">{{ item.payTime == null ? '-' : item.payTime }}</td>
                    <td class="receive6">{{ item.subjectName == null ? '-' : item.subjectName }}</td>
                    <td class="receive6">{{ item.realPrice == null ? '-' : item.realPrice }}</td>
                    <td class="receive6">
                        {{ item.fromType == null ? '-' : '' }}
                        {{ item.fromType == '0' ? $t('text.Contract.l337') : '' }}
                        {{ item.fromType == '1' ? $t('text.Contract.l338') : '' }}
                    </td>
                    <td class="receive6">??????{{ item.payMethod }}</td>
                    <td class="receive6">
                        <CommonOmit :text="item.notes == null ? '-' : item.notes" :length="3"></CommonOmit>
                    </td>
                    <td class="receive6 receice8">
                        <el-image style="width: 35px;height: 35px;border-radius: 5px;border: 1px solid #eee;"
                            :src="item.filePath.split(',')[0]" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                            :preview-src-list="item.filePath.split(',')" :initial-index="4" fit="cover">
                            <template #error>-</template>
                        </el-image>
                        <div v-if="item.filePath && item.filePath.split(',').length > 1" class="receice9">
                            +{{ item.filePath.split(',').length }}
                        </div>
                    </td>
                    <td :class="'receive6 ' + 'color' + item.examineStatus">
                        {{ item.examineStatus == null ? '-' : '' }}
                        {{ item.examineStatus == '0' ? $t('text.Contract.l170') : '' }}
                        {{ item.examineStatus == '1' ? $t('text.Contract.l169') : '' }}
                        {{ item.examineStatus == '2' ? $t('text.Contract.l171') : '' }}
                    </td>
                    <td class="receive6 receice7">
                        <DialogLayout51 isEdit :params="item" @returnData="setRefresh" :index="index">{{
                            $t('text.Contract.l172') }}
                        </DialogLayout51>
                    </td>
                </tr>
                <p v-if="loading" style="text-align: center;font-size: 12px;color: #bdbdbd;">Loading...</p>
            </table>
        </div>
    </div>
</template>
    
<script>

import DialogLayout51 from '@/components/dialogLayout/DialogLayout51.vue'
import { findPageByPaidIn } from '../../http/api'

export default {
    name: "ReceivableManage",
    props: {
        status:[String,Number]
    },
    components: { DialogLayout51 },
    data() {
        return {
            dataList: [],
            pageNo: 0,
            loading: false,
            disabled: false,
            total: 0
        }
    },
    mounted() {
    },
    methods: {
        getdata() {
            findPageByPaidIn({ contractId: this.$route.query.id, pageNo: this.pageNo, pageSize: 20 }).then(res => {
                if (res !== undefined) {
                    this.dataList = [...this.dataList, ...res.dataList]
                    this.total = res.total
                    if (this.dataList.length >= res.total) {
                        this.disabled = true
                    }
                } else {
                    this.disabled = true
                }
                this.loading = false
            }).catch()
        },
        load() {
            if (!this.disabled && !this.loading) {
                this.pageNo = this.pageNo + 1
                this.loading = true
                this.getdata()
            }
        },
        refresh() {
            findPageByPaidIn({ contractId: this.$route.query.id, pageNo: this.total + 1, pageSize: 1 }).then(res => {
                if (res !== undefined) {
                    this.dataList = [...this.dataList, ...res.dataList]
                    this.total = res.total
                }
            }).catch()
        },
        setRefresh(obj, index) {
            if (obj == 'delete') {
                if (index >= 0) {
                    this.dataList.splice(index, 1)
                }
            } else {
                findPageByPaidIn({ contractId: this.$route.query.id, pageNo: index + 1, pageSize: 1 }).then(res => {
                    if (res !== undefined && res.dataList.length > 0) {
                        this.dataList[index] = res.dataList[0]
                    }
                }).catch()
            }
        }
    },
    watch: {},
    computed: {},
}
</script>

<style scoped>
.ov {
    overflow: auto;
    flex: 1;
    margin-top: 15px;
    margin-bottom: 30px;
    background: #f0f0f0;
    border-radius: 4px;
}

.tag1 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #f6868629;
    border: 1px solid #f68686;
    color: #f68686;
    white-space: nowrap;
    height: 26px;
    margin: 5px 10px;
    padding: 2px 5px;
}

.tag2 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #54d2d029;
    border: 1px solid #54d2d0;
    color: #54d2d0;
    white-space: nowrap;
    height: 26px;
    margin: 5px 10px;
    padding: 2px 5px;
}

.tag3 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #518aff29;
    border: 1px solid #518aff;
    color: #518aff;
    white-space: nowrap;
    height: 26px;
    margin: 5px 10px;
    padding: 2px 5px;
}

.receive1 {
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    overflow: hidden;
}

.receive2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.receive3 {
    font-size: 13px;
    width: 100%;
    border-spacing: 0;
    padding: 0 20px;
}

.receive4 {
    position: sticky;
    top: 0;
    font-weight: 600;
}

.receive5 {
    background: #f0f0f0;
    border-bottom: 1px solid #bbb;
    height: 45px;
    position: sticky;
    top: 0;
    text-align: left;
    width: 12%;
}

.receive6 {
    border-bottom: 1px solid #ddd;
    height: 45px;
    text-align: left;
    width: 12%;
    word-break: break-all;
    padding-right: 20px;
}

.receice7 {
    color: #6698ff;
    text-decoration: underline;
    white-space: nowrap;
}

.receice8 {
    position: relative;
}

.receice9 {
    position: absolute;
    top: 25%;
    left: 10px;
    font-weight: 600;
    color: white;
    pointer-events: none;
}

.color1 {
    color: #3ac9c7;
}

.color0 {
    color: #f5a240;
}

.color2 {
    color: #f58d8d;
}
</style>